<template>
  <div class="quality-task-table-container">
    <!-- 搜索和重置 -->
    <div class="search-header">
      <el-input
        v-model="searchQuery"
        placeholder="请输入内容"
        class="search-input"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <table class="quality-task-table">
      <thead>
        <tr style="height: 26px;">
          <th>序号</th>
          <th>名称</th>
          <th>所属区县</th>
          <th>设备名称</th>
          <th>设备类别</th>
          <th>设备状态</th>
        </tr>
      </thead>
      <tbody>
        <tr style="height: 25px;" v-for="(row, index) in filteredData" :key="index">
          <td>{{ index }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.district }}</td>
          <td>{{ row.deviceName }}</td>
          <td>{{ row.deviceCategory }}</td>
          <td>{{ row.deviceStatus }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Search } from "@element-plus/icons-vue";

const searchQuery = ref('');
const tableData = ref([
  {
    name: '设备A',
    district: '区县A',
    deviceName: '设备名称A',
    deviceCategory: '类别A',
    deviceStatus: '正常'
  },
  {
    name: '设备B',
    district: '区县B',
    deviceName: '设备名称B',
    deviceCategory: '类别B',
    deviceStatus: '异常'
  },
  {
    name: '设备C',
    district: '区县C',
    deviceName: '设备名称C',
    deviceCategory: '类别C',
    deviceStatus: '正常'
  },
]);

const filteredData = computed(() => {
  return tableData.value.filter(item => {
    return Object.values(item).some(val => String(val).toLowerCase().includes(searchQuery.value.toLowerCase()));
  });
});

const handleSearch = () => {
  // 执行搜索逻辑
};

const handleReset = () => {
  searchQuery.value = '';
};
</script>

<style scoped>
.search-header {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-input {
  width: 200px;
}

.quality-task-table-container {
  background-color: rgb(15,53,115);
  color: #91caf6;
  overflow-y: auto;
  height: 225px; /* 可按需调整高度 */
  
}
.quality-task-table-container::-webkit-scrollbar {
  display: none;
}

.quality-task-table {
  width: 100%;
  border-collapse: collapse;
}

.quality-task-table th,
.quality-task-table td {
  padding: 10px;
  text-align: left;
}
.quality-task-table tr:nth-child(odd){
  background-color: rgb(10,43,94);
}
.quality-task-table tr:nth-child(even) {
  background-color: rgb(14,51,112);
}
</style>
